<script setup lang="ts">
  import { ref, watch } from 'vue';
  import { useBooleanStore } from '@/store';
  import { Notification } from '@arco-design/web-vue';
  import { addBinMaterial } from '@/api/system-basic';

  const form = ref({
    itemCode: '',
    groupCode: '',
    aoCode: '',
    isBzj: 'Y',
    shop: '190',
    itemQty: '',
    productCode: '',
  });
  const showDrawer = ref<boolean>(false);
  const booleanStore = useBooleanStore();

  // 监听弹框
  watch(
    () => booleanStore.boolValue,
    (newValue: boolean) => {
      if (booleanStore.num === 11) showDrawer.value = newValue;
      form.value.itemCode = '';
      form.value.groupCode = '';
      form.value.isBzj = 'Y';
      form.value.aoCode = '';
      form.value.shop = '190';
      form.value.itemQty = '';
      form.value.productCode = '';
    }
  );

  function afterVisibleChange(val: any) {
    if (!val) {
      booleanStore.toggleBool(11);
    }
  }
  function handleCancel() {
    booleanStore.toggleBool(11);
  }

  const formRef = ref<any>('');

  const rules = {
    itemCode: [
      { required: true, message: '不能为空' },
      {
        validator: (value: any, cb: any) => {
          if (value && value.length > 30) {
            cb('不能超过 30位字符');
          } else {
            cb();
          }
        },
      },
    ],
    groupCode: [
      { required: true, message: '不能为空' },
      {
        validator: (value: any, cb: any) => {
          if (value && value.length > 30) {
            cb('不能超过 30位字符');
          } else {
            cb();
          }
        },
      },
    ],
    aoCode: [
      { required: true, message: '不能为空' },
      {
        validator: (value: any, cb: any) => {
          if (value && value.length > 30) {
            cb('不能超过 30位字符');
          } else {
            cb();
          }
        },
      },
    ],
    isBzj: [
      { required: true, message: '不能为空' },
      {
        validator: (value: any, cb: any) => {
          if (value && value.length > 30) {
            cb('不能超过 30位字符');
          } else {
            cb();
          }
        },
      },
    ],
    shop: [
      { required: true, message: '不能为空' },
      {
        validator: (value: any, cb: any) => {
          if (value && value.length > 30) {
            cb('不能超过 30位字符');
          } else {
            cb();
          }
        },
      },
    ],
    productCode: [
      { required: true, message: '不能为空' },
      {
        validator: (value: any, cb: any) => {
          if (value && value.length > 30) {
            cb('不能超过 30位字符');
          } else {
            cb();
          }
        },
      },
    ],
  };

  async function handleOk(done: any) {
    const res = await formRef.value.validate();
    if (res) {
      done(false);
    } else {
      const data = await addBinMaterial(form.value);
      if (data.retCode === '200') {
        Notification.success({
          title: '成功',
          content: data.message,
          closable: true,
        });
        booleanStore.toggleBool(11);
      } else {
        Notification.error({
          title: '失败',
          content: data.message,
          closable: true,
        });

        booleanStore.toggleBool(11);
      }
      booleanStore.watchUpdate(26);
      done();
    }
  }
</script>

<template>
  <a-drawer
    :width="500"
    :height="340"
    :visible="showDrawer"
    placement="right"
    @after-visible-change="afterVisibleChange"
    @cancel="handleCancel"
    @ok="handleOk"
  >
    <template #title> 新增缓存料箱物料 </template>
    <div>
      <a-form
        ref="formRef"
        :model="form"
        :rules="rules"
        :style="{ width: '450px' }"
      >
        <a-form-item field="itemCode" label="图号">
          <a-input v-model="form.itemCode" placeholder="图号" />
        </a-form-item>
        <a-form-item field="groupCode" label="分组编码">
          <a-input v-model="form.groupCode" placeholder="分组编码" />
        </a-form-item>
        <a-form-item field="aoCode" label="AO编码">
          <a-input v-model="form.aoCode" placeholder="AO编码" />
        </a-form-item>
        <a-form-item field="isBzj" label="标准件">
          <a-select v-model="form.isBzj" placeholder="是标准件" size="large">
            <a-option value="Y">是</a-option>
            <a-option value="N">否</a-option>
          </a-select>
        </a-form-item>
        <a-form-item field="shop" label="单位:">
          <a-select v-model="form.shop" placeholder="单位">
            <a-option>190</a-option>
            <a-option>143</a-option>
          </a-select>
        </a-form-item>
        <a-form-item field="itemQty" label="数量">
          <a-input v-model="form.itemQty" placeholder="数量" />
        </a-form-item>
        <a-form-item field="productCode" label="机型">
          <a-input v-model="form.productCode" placeholder="机型" />
        </a-form-item>
      </a-form>
    </div>
  </a-drawer>
</template>

<style scoped>
  .add {
    background-color: #bacf65;
    color: #fff;
  }
  .clear {
    margin-left: 10px;
  }
</style>
